<template>
  <div class="my-echart-sunburst">
    <span class="title">卡路里旭日图</span>
    <v-chart :option="mychart_sunburst" id="mychart_sunburst"></v-chart>
  </div>
</template>

<script>
export default {
  name: 'my_echarts_sunburst',
  data() {
    return {
      data: null,
      mychart_sunburst: null
    }
  },
  methods: {
    getData(data) {
      this.data = data;
      this.chartRenderer();
    },
    /**
     * 获取数据后，渲染旭日图
     */
    chartRenderer() {
      /**
       * 新建 map 对消耗和补充的数据进行处理
       */
      var mapUse = new Map();
      var mapGet = new Map();
      for(var name in this.data) {
        // 第一层遍历，取到 item: name
        if(this.data[name]['type'] == '消耗') {
          for(var character of this.data[name]['character']) {
            if(mapUse.has(character)) {
              let value = mapUse.get(character);
              mapUse.set(character, ++value);
            } else {
              mapUse.set(character, 1);
            }
          }
        } else if(this.data[name]['type'] == '补充') {
          for(var character of this.data[name]['character']) {
            if(mapGet.has(character)) {
              let value = mapGet.get(character);
              mapGet.set(character, ++value);
            } else {
              mapGet.set(character, 1);
            }
          }
        }
      }
      /**
       * 过滤出现次数较少的类别，并处理成 option 所接受的形式
       */
      var mapSport = new Map();
      var mapMainFood = new Map();
      for(var name in this.data) {
        for(var character of this.data[name]['character']) {
          if(character == '运动' && !mapSport.has(name)) {
            mapSport.set(name, 1);
          }
          if(character == '主食' && !mapMainFood.has(name)) {
            mapMainFood.set(name, 1);
          }
        }
      }
      var arrSport = [], arrMainFood = [];
      for(let key of mapSport) {
        arrSport.push({
          name: key[0],
          value: key[1]
        })
      }
      for(let key of mapMainFood) {
        arrMainFood.push({
          name: key[0],
          value: key[1]
        })
      }
      var arrUse = [], arrGet = [];
      for(let key of mapUse) {
        if(key[1] >= 3) {
          if(key[0] == '运动') {
            arrUse.push({
              name: key[0],
              value: key[1],
              children: arrSport
            })
          } else {
            arrUse.push({
              name: key[0],
              value: key[1]
            })
          }
        }
      }
      for(let key of mapGet) {
        if(key[1] >= 5) {
          if(key[0] == '主食') {
            arrGet.push({
              name: key[0],
              value: key[1],
              children: arrMainFood
            })
          } else {
            arrGet.push({
              name: key[0],
              value: key[1]
            })
          }
        }
      }

      var data = [
        {
          name: '消耗',
          children: arrUse
        },
        {
          name: '补充',
          children: arrGet
        }
      ];

this.mychart_sunburst = {
  visualMap: {
    type: 'continuous',
    min: 3,
    max: 15,
    inRange: {
      color: ['#2F93C8', '#AEC48F', '#FFDB5C', '#F98862', '#f84a0d']
    }
  },
  series: {
    type: 'sunburst',
    data: data,
    radius: [60, '80%'],
    itemStyle: {
      borderRadius: 7,
      borderWidth: 2
    },
    label: {
      show: true
    },
    levels: [
      {},
      {
        r0: '15%',
        r: '35%',
        itemStyle: {
          borderWidth: 2
        },
        label: {
          rotate: 'tangential'
        }
      },
      {
        r0: '35%',
        r: '76%',
        label: {
          align: 'center'
        }
      },
      {
        r0: '78%',
        r: '80%',
        label: {
          position: 'outside',
          padding: 3,
          silent: false
        }
      }
    ]
  }
};
    }
  }
}
</script>

<style scoped>
  .my-echart-sunburst {
    width: 100%;
    height: 680px;
    position: absolute;
    top: 200px;
    left: 0;
    background-color: #eee;
    border-top: 12px solid #aaaaaa;
    border-left: 12px solid #706961;
    border-right: 12px solid #706961;
    border-bottom: 12px solid #cccccc;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0 20px 30px rgba(80, 80, 80, .5);
  }

  #mychart_sunburst {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
  }

  .title {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 24px;
    letter-spacing: 1px;
    color: #333;
  }
</style>